<template>
	<div class="padding-across-10">
		<!--      <div class="block" style="padding:0 0 1rem; ">
       <el-button v-if="loadingIcon"> <i class="el-icon-loading el-icon--left"></i>
        {{$t('message.refreshing')}}
      </el-button>
      <el-button v-else type="primary" v-on:click="reloadDatas">
        <i class="el-icon-eleg-icon_refresh el-icon--left"></i>
        {{$t('message.refresh')}}
      </el-button>
     </div> -->
		<headerOpreate style="padding-bottom: 3px" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<div class="tree_list">
			<p class="panel_title">{{$t('message.deviceList')}}</p>
			<el-tree :show-overflow-tooltip="true" :data="datas" ref="tree" :highlight-current="true" show-checkbox :props="props" :default-expand-all="true" @check-change="checkChange" node-key="keyid"> </el-tree>
		</div>
		<div class="container">
			<p class="panel_title">视频画面</p>
			<div class="container-section">
				<div id="flashContain"></div>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	import headerNave from '../../../../components/headerNave'
	import headerOpreate from '../../../../components/headerOpreate'
	import $ from 'jquery'
	import swf from '../../../../assets/js/swfobject.js'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	var picker = null,
		that = null;
	window['startPublish'] = function(url) {
		if(that) {
			that.handleStartPublish(url);
		} else {
			console.error(that.$t('message.initializeFailed'));
		}
	}
	window['stopPublish'] = function() {
		if(that) {
			that.handleStopPublish();
		} else {
			console.error(that.$t('message.initializeFailed'));
		}
	}
	export default {
		components: {
			headerNave,
			headerOpreate
		},
		data() {
			return {
				isReload: false,
				checkNodes: [],
				datas: [],
				flashurl: '',
				sns: [],
				broadcastGid: '',
				props: {
					label: 'name',
					id: 'keyid'
				},
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: this.$t("message.refresh"),
					action: 'reloadDatas'
				}]
			}
		},
		props: {
			subArgs: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			getArrayProp(array) {
				var result = [];
				for(var i = 0; i < array.length; i++) {
					result[i] = array[i].sn;
				}
				return result;
			},
			
			checkChange(data, isChecked, hasChildrenChecked) {
				if(!this.isReload) {
					this.sns = this.getArrayProp(this.$refs.tree.getCheckedNodes());
					if(this.flashurl.length > 0) {
						var parmas = {
							"url": this.flashurl,
							"sns": this.sns,
							"operation": 1,
							"UserId": parseInt(GloabFun.getKeyId())
						};
						HttpServer.httpPost.call(this, '/Api/Telecast/Post', parmas, function(response) {}, function(response) {
							if(response.data.code === 0) {
								if(this.sns.length > 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.broadcastSuccess'),
										type: 'success',
										duration: 2500
									});
								}
								this.broadcastGid = response.data.schedule_gid;
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}
				}
			},
			handleStartPublish(url) {
				this.flashurl = url;
				if(url == null || url === "") {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.serverAddressOfStreamingMediaInvalid'),
						type: 'warning',
						duration: 2500
					});
				}
				if(this.sns.length === 0) {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.chooseTheDevice'),
						type: 'warning',
						duration: 2500
					});
				}
				var parmas = {
					"url": url,
					"sns": this.sns,
					"operation": 1,
					"UserId": parseInt(GloabFun.getKeyId())
				};
				HttpServer.httpPost.call(this, '/Api/Telecast/Post', parmas, function(response) {}, function(response) {
					if(response.data.code === 0) {
						if(this.sns.length > 0) {
							this.$notify({
								title: '成功',
								message: this.$t('message.broadcastSuccess'),
								type: 'success',
								duration: 2500
							});
						}
						this.broadcastGid = response.data.Broadcast_gid;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			handleStopPublish() {
				if(this.sns.length > 0) {
					var parmas = {
						"sns": this.sns,
						"operation": 0,
						"UserId": parseInt(GloabFun.getKeyId()),
						"schedule_gid": this.broadcastGid
					};
					HttpServer.httpPost.call(this, '/Api/Telecast/Delete', parmas, function(response) {}, function(response) {
						this.$notify({
							title: '成功',
							message: this.$t('message.stopBroadcastSuccess'),
							type: 'success',
							duration: 2500
						});
					});
				}
				this.flashurl = "";
			},
			reloadDatas() {
				HttpServer.httpPost.call(this, '/Api/Device/Info', {category: ['MultimediaIT']}, function(response) {}, function(response) {
					this.isReload = true;
					this.getCheckedNodes = this.$refs.tree.getCheckedNodes();
					this.datas = response.data.deviceinfo;
					// let vm = this;
					// this.datas = [];
					// response.data.deviceinfo.forEach(function(item) {
					// 	if(item.model === 'TC1000') {
					// 		vm.datas.push(item);
					// 	}
					// });
					this.$nextTick(function() {
						this.$refs.tree.setCheckedNodes(this.getCheckedNodes);
						this.$nextTick(function() {
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
							this.isReload = false;
						});

					});
				});
			},
			getDatas() {
				HttpServer.httpPost.call(this, '/Api/Device/Info', {category: ['MultimediaIT']}, function(response) {}, function(response) {
					this.datas = response.data.deviceinfo;
					// let vm = this;
					// this.datas = [];
					// response.data.deviceinfo.forEach(function(item) {
					// 	if(item.model === 'TC1000') {
					// 		vm.datas.push(item);
					// 	}
					// });
				});
				HttpServer.httpGet.call(this, '/Api/SysConfig/GetConfigUrl?name=videoserver', function(response) {}, function(response) {
					swf.swfobject.embedSWF(localHost + "/Images/webchat.swf", "flashContain", "100%", "100%", "6.0.0", null, {
						message: 'I come from Flash.',
						url: response.data
					}, {
						play: false,
						allowScriptAccess: "always"
					});
				});
			}
		},
		created() {
			that = this;
			this.getDatas();
		}
	}
</script>
<style lang="less" scoped>
	.tree_list {
		.el-tree {
			overflow: auto;
		}
		.el-tree-node__expand-icon {
			display: none;
		}
		.el-checkbox {
			margin-left: 10px;
		}
	}
</style>
<style scoped lang="less">
	.el-tag {
		font-size: 14px;
	}

	.tree_list {
		width: 220px;
		float: left;
		height: 530px;
		.panel_title {
			border-radius: 3px;
			background-color: #000;
			color: white;
		}
		>div {
			width: 100%;
			height: 100%;
		}
	}

	.container {
		width: e("calc(100% - 220px)");
		float: left;
		height: 530px;
		.container-section {
			border: 1px solid #d3dce6;
			height: 100%;
			margin-left: 10px;
			background-color: #eee;
		}
		.panel_title {
			border-radius: 3px;
			background-color: #000;
			color: white;
		}
	}

	.moduel_fun {
		width: 20%;
		display: block;
		float: left;
		padding-top: 20px;
		padding-bottom: 10px;
		text-decoration: none;
		>span {
			display: block;
			padding: 20px 10px;
			margin: 0 auto;
			text-align: center;
			max-width: 100px;
		}
	}

	.el-tree-node__expand-icon.is-leaf {
		width: 10px;
		margin: 0;
	}

	@media screen and (max-width: 1100px) {
		.moduel_fun>span {
			margin: 0 10px;
		}
		/* .tree_list{
           width:200px !important;
         }
         .container{
          width:e("calc(100% - 200px)") !important;
         } */
	}
</style>
